5:53 / 25:00•Watch full video

Intro

Describe project

Setup proejct

Create and Design Header

Create and Design List Item Carousel Slider

Create and Design List thumbnail Carousel Slider

Create and Design button next and Prev

Active Item Slider and Create Animation Content

Effect Animation when Click Next button in CSS

Effect Animation when Click Prev Button in CSS

Create element running when slider active

Responsive

Setup Javascript

Event next button click

Event prev button click

Set Slider Auto run

Joonas Hiltunen

Public

0/140

30.0 seconds

Continue clipping after ad finishes

Can't create clip while ad is playing

Create A Slider Crazy Effects Using HTML CSS And Javascript

9.5KLikes

266,656Views

22 Nov2023

In this video, let's join Lun Dev to Create A Slider Crazy Effects Using HTML CSS And Javascript with extremely cool effects, along with the most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image, A horizontal bar used to count down the running time of an animation, Creating an endless loop helps users click next forever but will never run out of sliders, And automatically switch slider after specified time, This design has also been made Responsive so it works well on different screens. Step By Step in this video: 00:00 Intro 00:13 Describe project 01:58 Setup proejct 02:23 Create and Design Header 04:05 Create and Design List Item Carousel Slider 08:10 Create and Design List thumbnail Carousel Slider 09:51 Create and Design button next and Prev 11:06 Active Item Slider and Create Animation Content 12:51 Effect Animation when Click Next button in CSS 15:20 Effect Animation when Click Prev Button in CSS 17:40 Create element running when slider active 18:35 Responsive 19:10 Setup Javascript 19:35 Event next button click 21:35 Event prev button click 23:14 Set Slider Auto run Download Code and Image: https://www.lundevweb.com/2023/11/des... ----- This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation. All codes are free. Sharing will help us grow faster. #slider #carousel #css ----- Design Slider - Carousel web: • Animation Card Slider in HTML CSS & J... Design Template Website: • Parallax Scrolling Website | Make Web... Design Parallax SCrolling Effect: • Reponsive Parallax Scrolling Website ... Effect Image using HTML CSS Javascript: • How To Make Zoom Image Using HTML CSS... Design Animation Menu Web: • Design Navigation Menu Indicator usin... Design Effect Card: • How to make Awesome CSS Border Animat... There are many other series: https://www.youtube.com/@lundeveloper... ----- Contact With me: Instagram: / lundev.web Email: hohoang.dev@gmail.com Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.

Intro

Describe project

Setup proejct

Create and Design Header

Featured playlist

Design Slider - Carousel web

Lun Dev Code

Transcript

Follow along using the transcript.

Lun Dev Code

26.9K subscribers

How To Make Responsive Image Slider Using HTML CSS and JavaScript

by Lun Dev Code

How To Add To Cart Shopping using HTML CSS and Javascript

by Lun Dev Code

Make Ecommerce Product Details Website Using HTML CSS JavaScript

by Lun Dev Code

How To Make Slider Food Using HTML CSS and JavaScript

by Lun Dev Code

Create Shopping Cart And Checkout using HTML CSS & Javascript

by Lun Dev Code

Create A Slider Crazy Effects Using HTML CSS And Javascript

26.9K subscribers

266,656 views 22 Nov 2023 Design Slider - Carousel web

In this video, let's join Lun Dev to Create A Slider Crazy Effects Using HTML CSS And Javascript with extremely cool effects, along with the most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image, A horizontal bar used to count down the running time of an animation, Creating an endless loop helps users click next forever but will never run out of sliders, And automatically switch slider after specified time, This design has also been made Responsive so it works well on different screens. Step By Step in this video: 00:00 Intro 00:13 Describe project 01:58 Setup proejct 02:23 Create and Design Header 04:05 Create and Design List Item Carousel Slider 08:10 Create and Design List thumbnail Carousel Slider 09:51 Create and Design button next and Prev 11:06 Active Item Slider and Create Animation Content 12:51 Effect Animation when Click Next button in CSS 15:20 Effect Animation when Click Prev Button in CSS 17:40 Create element running when slider active 18:35 Responsive 19:10 Setup Javascript 19:35 Event next button click 21:35 Event prev button click 23:14 Set Slider Auto run Download Code and Image: https://www.lundevweb.com/2023/11/des... ----- This youtube channel not only revolves around topics about website programming using HTML CSS Javascript, but also website design, ideation and implementation. All codes are free. Sharing will help us grow faster. #slider #carousel #css ----- Design Slider - Carousel web:

• Animation Card Slider in HTML CSS & J... Design Template Website:

• Parallax Scrolling Website | Make Web... Design Parallax SCrolling Effect:

• Reponsive Parallax Scrolling Website ... Effect Image using HTML CSS Javascript:

• How To Make Zoom Image Using HTML CSS... Design Animation Menu Web:

• Design Navigation Menu Indicator usin... Design Effect Card:

• How to make Awesome CSS Border Animat... There are many other series: https://www.youtube.com/@lundeveloper... ----- Contact With me: Instagram:

/ lundev.web Email: hohoang.dev@gmail.com Buy me a cup of coffee by clicking the thanks button on any video. Thank you very much for your support.

Intro

Describe project

Setup proejct

Create and Design Header

Create and Design List Item Carousel Slider

Create and Design List thumbnail Carousel Slider

Create and Design button next and Prev

Active Item Slider and Create Animation Content

Featured playlist

Design Slider - Carousel web

Lun Dev Code

Transcript

Follow along using the transcript.

Lun Dev Code

26.9K subscribers

How To Make Responsive Image Slider Using HTML CSS and JavaScript

by Lun Dev Code

How To Add To Cart Shopping using HTML CSS and Javascript

by Lun Dev Code

Make Ecommerce Product Details Website Using HTML CSS JavaScript

by Lun Dev Code

How To Make Slider Food Using HTML CSS and JavaScript

by Lun Dev Code

Create Shopping Cart And Checkout using HTML CSS & Javascript

by Lun Dev Code

Show less

184 Comments

Add a comment…

Pinned by Lun Dev

5 months ago

A Slider Carousel design with crazy effects. Follow my channel to continuously update new videos every day

@demetriuslewis6750

3 months ago

I love that you explain the css properties that you are using and why you are using them as you are styling the page and what their effecting in realtime. I haven't seen another youtube channel do this. That's awesome!

·

5 months ago

The most outstanding and complete functions of a slider: Allows manipulation of navigation buttons to change the displayed image. A horizontal bar used to count down the running time of an animation. Creating an endless loop helps users click next forever but will never run out of sliders. And automatically switch slider after specified time. This design has also been made Responsive so it works well on different screens.

Read more

@wintersol9921

3 months ago

This is the best video that I have found in my life for learning html-css-js. Very clear and precise description while coding. Liked and subscribed. Thanks for the video.

@Vivek-qc8qo

9 days ago

Coming here from the Kevin Powell channel , and it was overhyped shit, your content is just goldd , lucky me , i found you in early days of my front-end journey. Started learning in april itself, was unable to find any good channel but you are

·

@user-jx1ik6dg9e

2 months ago

I have been struggling to create a carousel for my project trying to learn from other channels but to no success till I found this channel keep up the good job your impact in the design world is felt and utterly appreciated!

·

@vasiovasio

3 months ago

Well, we must admit this is very cool and the performance is super fast, without millions of rows of JS code! Thank you!

·

@CromwellEdonis

1 month ago

This is such an amazing website tutorial. Thank you very much for making this. I am learning a lot just from watching.

@renjukarmakar9925

1 month ago

Your support to beginner developer is not decriable

, some people like you are the motivator and suppoter for us

. You are amazing brother

Love you

·

@AZ-qn3xq

3 months ago

Awesome job my friend! Please, more content like that!

@FMNathan999

3 months ago

What a Project! Great job man!

@IzharReyes-ye7gb

2 months ago

This is what I was looking for. Thank you bro! new sub!

@MR.CH34T

3 months ago

Amazing

Subscribed Automatically

@bary7574

3 months ago

you made this tutorial 0 to 100 in few minutes XD Gretat Job btw!

@user-li4kq2my5m

2 months ago

bro ty so much, this help my project a lot

@DanDan-kx4zv

2 months ago

Better than any other youtubers. Insane skill. magic code

@BPPNaaby

3 months ago

Great job and amazing tutorial.

@user-sl8ni2hi2l

3 months ago (edited)

Great Job Man, btw, the auto next timmer should be setInterval

@djspikeone

2 months ago

Thx for tutorial, I'm learning front end for some time so I made it little different, I created array with objects inside js file and inside that objects i did put the content text / img / title etc and on slide switch i just imported that array[index]object content with setTimeout method and also used setTimeout to remove and add class active to the slider content so it loads up one after another too like on your tutorial, I think that is more efficient way so you dont put that much code inside html file. I guess there is also X more different ways to make that carousel too

Read more

@vladimiruchiha4420

3 months ago

finally!!! found a channel to learn some professional lvl stuff

@user-ro2ke1cs8f

1 month ago

Thank you brother. Great slider.

@1586jeffrey

2 weeks ago

Very clear tutorial, thank you. Can you extend this video and/or explain how to add click events to the thumbnails itself, so it directly opens the selected item?

@user-eu9rf4nt9c

3 months ago

Very nice project bro

️

️

@AlexanderKrainov

3 months ago (edited)

Thanks, bro! really helpful

@UnfazedMindzet

5 months ago

It's stunning brother....

Please create a stunning portfolio website also brother... Merci à toi.

·

@emile28lozama

2 months ago

thanks I learned a lot from this video. I do have one question though, can I replace the images files with video files?

@shairongodly3815

3 months ago

Wow, this is the greatest slider I saw!

·

@programmingsabrina127

2 weeks ago

Excellent work ! Thank you very much !

@singhrohit_

2 months ago (edited)

Wt man

This is crazy I didn’t even think about this that i can also do this

. Thankyou dev

I am subscribing you

·

@olegivanov6231

5 months ago

Outstanding job, bro

very inspiring.

·

@muhammadumarsotvoldiev9555

2 months ago

Thank you very much! Very useful!

@hwapyongedouard

5 months ago

bro i needed this a lot . thank you , upload cool stuff like bro

·

@marcogerritsen8510

3 months ago

Amazing! Thank you!

@user-wv3ir9bp7f

4 months ago

cool idea and very inspiring. hope this channel can get bigger and more famous, Is this okay if i use this to add this function to my project?

·

@osoningliztili6708

5 months ago

cool, I like it so much. it is responsive, so awesome. thank you very much

·

@chahatmanchanda1536

3 weeks ago

Great work. But i wanna know, how these images are of so small sizes with such a good quality? What tool you used for that?

@AlbanDoku11

2 weeks ago

thank u very much for your effort

@joellogbo952

1 month ago

Great job! I don't understand how you're adding the next and prev carousels to the carousel class.

@TegaMetitiri

3 weeks ago

Great video

@LifeofPets1

5 months ago

man you are legend , learning a lot from u . love ur work

·

@user-pi2td8bt8s

3 months ago

Hero sir

@RivaNNaaa

2 months ago

It is amazing job

@tumaleed5701

3 months ago

Very good

@85MA

1 month ago

amazing work! complete website tutorial requested plz

@ihelpdogs

3 months ago

Looks great. The downside I find with sliders/hero images is on mobile they only look good if the main 'character' in the image is in the center, otherwise you just see a forehead, half a keyboard, an eyeball, some dudes ankles etc.

@christopherc4526

3 months ago

Well done

@kgomotsolouisaseema

3 months ago

dope

@LuizCarvalho-oq4gq

3 months ago

A huge thanks for your work and I must say that you did a great job in this one. I'm trying to do the same here, but instead of using divs I'm using semantic tags and following your steps, but unfortunately it isn't going so well. Instead of using divs for list and item I'm using <ul> and <li> to do the job, I know that I should change some property about the display of the list but I don't really get what it is. Could you tell me more or less what I should change?

·

@andresassiente5883

3 months ago

Amazing!

@reneglockner

3 months ago

Really very nice!

@petejones2168

3 weeks ago (edited)

Hi Lun Dev, i love the carousel. I am wondering how i could add swipe functionality so that it is more intuitive on mobile.

@vir9

3 months ago

Awesome, subscribed! Thanks

·

@Moviezoneee794

1 month ago

great video...can i please know where you downloaded these high quality pictures

@NorgeSantana

3 months ago

Amazing job subscribed.

·

@user-ro2ke1cs8f

1 month ago

Thank you

@albertocabello7914

1 month ago

This example is fantastic. I'm implementing it in a project I have in Angular, but I get this message when I try to call another form from the "See More" button. I can see this in the console ERROR TypeError: Node.appendChild: Argument 1 is not an object.

@moisesromero9263

3 months ago

Excellent brother, can you do this but with videos and not images?

@cleberlimacls

1 month ago

Hi. Great content. Tks. I'm a self-taught beginner in front end so, sorry for this question. When you code in CSS ".carousel .list .item .content .author" isn`t the same as just ".author"? A bit confused to me

@thibautkouame1721

2 months ago

great !

@Kinetica_tm

3 months ago

brother amazing videos but pls get a mic <3